
<template>
    <div class="detail">
        <span class="detail-top-icon back" @click="back()"></span>
        <span class="detail-top-icon share" @click="share(id)"></span>
        <div class="swiper-container swiper-detail-show">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-detail-show-item" v-for="item of showItems" :key="item.id">
                    <img class="full" :src="item.img">
                </div>
            </div>
        </div>
        <div class="swiper-detail-show-pagination"></div>
        <div class="section section-price">
            <div class="price-box">
                <div class="order-box">
                    <span class="order">订金</span>
                    <span class="price">50</span>
                    <span class="ticket">抵350元</span>
                </div>
                <p class="adavanceprice-box">预售价 <span class="price">3799</span></p>
            </div>
            <div class="time-box">
                <span class="end">距结束</span>
                <span class="time-item">{{hour}}</span>
                <span class="spe">:</span>
                <span class="time-item">{{minute}}</span>
                <span class="spe">:</span>
                <span class="time-item">{{second}}</span>
            </div>
        </div>
        <div class="section section-orderflow">
            <div class="payflow-box">
                <span>流程</span>
                <span>1.支付预付款-2.支付尾款</span>
                <span>11月1日00:00 至 11月1日23:59</span>
            </div>
            <div class="overview-box">
                <span class="activity-img"><img class="full" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5140715760aa69c857147650cd40c33a.jpg"></span>
                <span class="product-name">小米10系列</span>
            </div>
        </div>
        <div class="section section-desc">
            <p>「到手价3499起；付尾款前5500名送双十一定制礼盒；可使用北京消费券」</p>
            <div class="desc-item">①【旗舰屏幕】90Hz刷新率&180Hz采样率，高端双曲面屏</div>
            <div class="desc-item">②【旗舰影像】一亿像素 8K电影相机，超高像素超清晰</div>
            <div class="desc-item">③【旗舰性能】高通骁龙865旗舰平台，超越预期的性能体验</div>
            <div class="buy-welfare">购机优选福利<span class="iconfont">&#xe611;</span></div>
        </div>
        <div class="section section-paramter">
            <div class="paramter-item-list">
                <div class="paramter-item">
                    <div class="paramter-img">
                        <img class="full" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png">
                    </div>
                    <div class="type-item type">CPU</div>
                    <div class="type-item model">晓龙865</div>
                </div>
                <div class="paramter-item">
                    <div class="paramter-img">
                        <img class="full" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png">
                    </div>
                    <div class="type-item type">四摄像头</div>
                    <div class="type-item model">10800万+景深+微距+1300万像素</div>
                </div>
                <div class="paramter-item">
                    <div class="paramter-img">
                        <img class="full" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png">
                    </div>
                    <div class="type-item type">CPU</div>
                    <div class="type-item model">晓龙865</div>
                </div>
                <div class="paramter-item">
                    <div class="paramter-img">
                        <img class="full" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png">
                    </div>
                    <div class="type-item type">CPU</div>
                    <div class="type-item model">晓龙865</div>
                </div>
                <div class="paramter-item">
                    <div class="paramter-img">
                        <img class="full" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png">
                    </div>
                    <div class="type-item type">CPU</div>
                    <div class="type-item model">晓龙865</div>
                </div>
                <div class="paramter-item">
                    <div class="paramter-img">
                        <img class="full" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png">
                    </div>
                    <div class="type-item type">CPU</div>
                    <div class="type-item model">晓龙865</div>
                </div>
            </div>
        </div>
        <div class="line-box"></div>
        <div class="section-choosen">
            <div class="choosen-box version-box">
                <span class="title">已选</span>
                <div class="paramter-item">
                    <span class="name">小米10</span>
                    <span class="version">全网通版</span>
                    <span class="memory">8G+128G</span>
                    <span class="color"></span>
                    <span class="iconfont allow">&#xe630;</span>
                </div>
            </div>
            <div class="choosen-box area-box">
                <span class="title">送至</span>
                <div class="paramter-item">
                    <span class="iconfont">&#xe6f8;</span>
                    <span class="province">广东省</span>
                    <span class="city">深圳市</span>
                    <span class="area">福田区</span>
                    <span class="stock">有现货</span>
                    <p class="delivery-time">预计72小时内发货</p>
                    <span class="iconfont allow">&#xe630;</span>
                </div>
            </div>
            <div class="service">
                <span class="service-item">小米自营</span>
                <span class="service-item">小米发货</span>
                <span class="service-item">7天无理由退换</span>
                <span class="iconfont allow">&#xe630;</span>
            </div>
        </div>
        <div class="line-box"></div>
    </div>
</template>

<script>

export default {
    name: 'Detail',
    data() {
        return {
            id:0,
            discountEndtime:'2020-11-01 00:00:00',
            discountEndtimeint:0,
            hour:'00',
            minute:'00',
            second:'00',
            showItems:[
                {
                    id:1,
                    img:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ff17f96513e9c29c948e32453784f0e2.jpg'
                },
                {
                    id:2,
                    img:'//cdn.cnbj1.fds.api.mi-img.com/mi-mall/48e4bb01b852c1d4800622c2d3cba0cd.jpg'
                }
            ]
        }
    },
    mounted() {
        this.id = this.$route.params.id;
        if(!this.id) {
            throw Error('id is required');
        }
        this.getData();
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        getData() {
            let loading = this.$loading();
            setTimeout(() => {
                loading.close();
                this.init();
            },1000);
        },
        init() {
            new this.$swiper('.swiper-detail-show',{
                loop: true,
                autoplay: true,
                delay: 5000,
                pagination:{
                    el:'.swiper-detail-show-pagination',
                    type:'fraction'
                },
                touchMoveStopPropagation:true
            });
            if(this.discountEndtime) {
                let endtime = new Date(this.discountEndtime);
                this.discountEndtimeint = Math.floor(endtime/1000);
                setInterval(this.untilEndTime,1000);
            }
        },
        untilEndTime() {
            let cur = Math.floor((new Date().getTime())/1000),
            df = this.discountEndtimeint - cur;
            let h = Math.floor(df/3600),
            m = Math.floor((df-h*3600)/60),
            s = Math.floor((df-h*3600-m*60));
            if(h < 10) h = '0'+h;
            if(m < 10) m = '0'+m;
            if(s < 10) s = '0'+s;
            this.hour = h;
            this.minute = m;
            this.second = s;
        }
    }
}
</script>

<style lang="stylus">

@import '../assets/css/theme.styl'

.detail
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1000px;
    z-index 1
    text-align left;
.line-box
    width:100%;
    height:15px;
    background rgb(246, 246, 246);
.swiper-detail-show-item
    width:100%;
    height 455.84px;
.detail-top-icon
    position absolute;
    display:inline-block;
    width:46px;
    height:46px;
    top:3px;
    z-index 2
    background-size cover;
.back
    left:7px;
    background-image url(https://m.mi.com/static/img/icon-back3.cee4a42398.png)
.share
    right:7px;
    background-image url(https://m.mi.com/static/img/icon-share-white.10afb8d45d.png)
.swiper-detail-show-pagination
    position:absolute;
    left:auto;
    right:7px !important;
    top:420px;
    z-index 2
    width:50px;
    height:25px;
    line-height 25px;
    text-align center;
    background rgba(0,0,0,.5)
    border-radius:12px;
    color:#fff;
.section
    width:100%;
    padding 0 $mg;
    box-sizing: border-box;
.section-price
    width:100%;
    height:52.95px;
    background: linear-gradient(90deg,#ff6004,#ff2914);
    color #fff;
    display flex;
    justify-content space-between;
    align-items center;
    .price-box
        .order-box
            .order
                font-size 13px;
            .price
                position relative;
                margin-left 20px;
                font-size 25px;
                font-weight bolder;
                vertical-align middle;
                &::after
                    font-size:22px;
            .ticket
                margin-left 8px;
                background #fff;
                color #ff4d25;
                font-size 13px;
                padding 2px 4px;
                border-radius 12px;
        .adavanceprice-box
            margin-top 2px;
            font-size 15px;
            .price
                margin-left 15px;
                position relative;
                &::after
                    left -10px;
    .time-box
        font-size 14px;
        width:150px;
        display flex;
        justify-content center;
        align-items center;
        .time-item
            background #c20000;
            width:25px;
            height:20px;
            line-height 20px;
            border-radius:3px;
            text-align center
            font-weight 700;
        .end
            margin-right 5px;
        .spe
            margin 0 2px;

.section-orderflow
    width:100%;
    padding:15px $mg;
    box-sizing:border-box;
    .payflow-box
        font-size:13px;
        color rgba(0,0,0,.498);
    .overview-box
        margin-top 15px;
        .activity-img
            display:inline-block;
            width:33px;
            height  16px;
        .product-name
            margin-left:5px;
            font-size:18px;
            font-weight:bold

.section-desc
    font-size:14px;
    line-height 1.5
    .desc-item
        margin-top 6.9px;
    .buy-welfare
        display:inline-block;
        padding 3px 20px 3px 10px;
        margin-top 15px;
        background #f0f0f0;
        color #444;
        border-radius 10px;
        position relative
        .iconfont
            position:absolute;
            transform:rotate(90deg);

.section-paramter
    padding 0;
    width:100%;
    margin-top 16px;
    white-space:nowrap
    overflow-x:auto;
    text-align left;
    border-top 1PX solid #e0e0e0;
    &::-webkit-scrollbar
        display none;
    .paramter-item-list
        padding 16px 0;
        .paramter-item
            display inline-block
            width:96px;
            font-size:12px;
            text-align:center;
            div
                margin-top 5px;
            .paramter-img
                width:17px;
                height 17px;
                margin auto;
            .type-item
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;


.section-choosen
    padding-top 10px
    padding-left $mg
    font-size 14px;
    font-weight 500
    .choosen-box
        display:flex;
        justify-content:space-between;
        align-items:center;
        position relative
        .title
            display:inline-block;
            width:56px
        .paramter-item
            height:100%;
            flex 1
            padding 10px 0;
            border-bottom 1PX solid #e0e0e0;
            span 
                margin-right 5px;
            .stock
                color $themecolor
            .delivery-time
                color rgba(0,0,0,.54);
                margin-top 5px;
                margin-left 20px;
            .allow
                position:absolute;
                top 50%;
                right 0;
                transform translateY(-50%);
    .service
        width:100%;
        height 40px;
        line-height 40px;
        background #fcfcfc
        position:relative;
        .service-item
            display:inline-block;
            font-size 12px;
            margin-right 15px;
            color rgba(0,0,0,.54);
        .allow
            position:absolute;
            top 50%;
            right 6px;
            transform translateY(-50%);
</style>